import React, {Component} from 'react';
import {Button, Space, Select, Statistic, Card} from 'antd';
//引入链接UI组件与redux
import {connect} from 'react-redux'
import {
    increment, decrement, incrementAsync
} from "../../redux/actions/count";

//用户获取store中管理的状态
const {Option} = Select;

class Count extends Component {
    state = {
        selectNumber: 0
    }

    //+
    increment = () => {
        let {selectNumber} = this.state;
        this.props.increment(selectNumber)
    }
    //-
    decrement = () => {
        let {selectNumber} = this.state;
        this.props.decrement(selectNumber)
    }
    incrementIfOdd = () => {
        let {selectNumber} = this.state;
        if (this.props.count % 2 !== 0) {
            this.props.increment(selectNumber)
        }
    }

    incrementAsync = () => {
        let {selectNumber} = this.state;
        this.props.incrementAsync(selectNumber, 1000)
    }

    //组件变换
    handleChange = (value) => {
        this.setState({
            selectNumber: value
        })
    }

    render() {
        return (
            <div>
                <Card title="当前求和为:" style={{width: 500}}>
                    <Statistic value={this.props.count}/>
                    <Statistic value={this.props.ren}/>
                    <Space>
                        <Select style={{width: 200}}
                                onChange={this.handleChange}>
                            <Option value={1}>1</Option>
                            <Option value={2}>2</Option>
                            <Option value={3}>3</Option>
                        </Select>
                        <Button onClick={this.increment} type="primary">+</Button>
                        <Button onClick={this.decrement} type="primary">-</Button>
                        <Button onClick={this.incrementIfOdd} type="primary">奇数+</Button>
                        <Button onClick={this.incrementAsync} type="primary">异步加</Button>
                    </Space>
                </Card>

            </div>
        );
    }
}

//创建并暴露一个Count的容器组件
export default connect(
    state => ({count: state.he, ren: state.ren.length}),
    // dispatch => ({
    //     //执行redux执行加法
    //     increment: data => dispatch(createIncrementAction(data)),
    //     decrement: data => dispatch(createDecrementAction(data)),
    //     incrementAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time))
    // }),
    {
        //执行redux执行加法
        increment,
        decrement,
        incrementAsync
    }
)(Count);